<template>
    <div v-if="isLogin" class="page absolute w100 t0" id="container">
        <!-- <discount-goods title="精品咖啡 中秋月饼好伴侣"></discount-goods> -->
        <!-- 领取优惠券 -->
        <div class="relative">
            <img class="w100 block" src="../../../images/autumn1.png" alt="">
            <span class="absolute h20" @click.stop="getCoupus" style="bottom:6%;left:37%;width:25%;"></span>
        </div>
        <!-- 抢购月饼礼 -->
        <div class="relative">
            <img class="w100 block" src="../../../images/autumn2.png" alt="">
            <span class="absolute h24" @click.stop="getAutumn(codeInfo.proNo1)" style="bottom:30%;right:24%;width:22%;"></span>
        </div>
        <!-- 抢购提货券 -->
        <div class="relative">
            <img class="w100 block" src="../../../images/autumn3.png" alt="">
            <span class="absolute h24" @click.stop="getAutumn(codeInfo.proNo2)" style="top:38%;left:9%;width:22%;"></span>
        </div>
        <!-- 中秋礼盒两盒装 -->
        <div class="relative">
            <img class="w100 block" src="../../../images/autumn4.png" alt="">
            <span class="absolute h24" @click.stop="getAutumn(codeInfo.proNo3)" style="top:29%;right:17%;width:22%;"></span>
            <span class="absolute h24" @click.stop="getAutumn(codeInfo.proNo4)" style="bottom:10%;right:17%;width:22%;"></span>
        </div>
        <div class="relative">
            <img class="w100 block" src="../../../images/autumn5.png" />
            <span class="absolute h24" @click.stop="getAutumn(codeInfo.proNo5)" style="top:26%;right:17%;width:22%;"></span>
        </div>
        <div class="relative">
            <img class="w100 block" src="../../../images/autumn6.png" />
        </div>
        <div class="relative">
            <!-- <img class="w100 block" src="../../../images/autumn7.png" /> -->
            <x-img :src="imgSrc" class="w100 block" :offset="-100" container="#container"></x-img>
        </div>
        <div class="relative">
            <img class="w100 block" src="../../../images/autumn8.png" />
        </div>
        <!-- 注册手机号验证 -->
        <reg-phone :isShow="showPopup" @cancel="showPopup=false" @confirm="confirmCB"></reg-phone>
    </div>
</template>
<script>
import mixins from 'mixins';
import { XImg } from 'vux';
import { getCoupon,isUserSubscribe,isRegister } from 'request';
import { getUrlParameters,getOpenId,shareNewAutumn,shareIndex } from "methods/baseinfo.js";
import { codeInfo } from 'methods/packageConfig.js';
export default {
    name:'newAutumn',
    mixins:[mixins],
    components:{ XImg },
    beforeRouteEnter(to,from,next){
        if(sessionStorage.getItem("isHkb")){
            next(vm=>{
                vm.isLogin = true;
                vm.$store.commit('increment','中秋礼盒活动');
            });
        }else{
            //如果没有登陆就先进入登陆页，然后跳转回来
            next(vm=>{
                vm.$router.push({ path:'/login',query:{ pageUrl: 'autumn' }});
            })
        }
    },
    data(){
        return {
            isLogin:false,
            shopList:[],
            showPopup:false,
            popupNo: '',            //点击确定之后的商品编号保存
            getCoupsState:false,    //默认未点击领取优惠券
            openId:'',              //获取的openId
            isSubscribe:false,      //是否关注，默认未关注
            codeInfo:codeInfo(),    //优惠券配置信息
            isRegPhone:false,       //是否注册手机号
            imgSrc: require('../../../images/autumn7.png'),
        }
    },
    async created(){
        this.openId = await getOpenId();
        var jsonStr = getUrlParameters();
        this.shareCouponNo = jsonStr.state || '70e5cf578ad74e0092661033c8e9b4f9';
        this.getScanQRcode();
        //获取手机号注册信息
        await isRegister({}).then(res=>{
            if (res.data.result == "7012") {
                this.isRegPhone = false;
            }else{
                this.isRegPhone = true;
            }
        }).catch(err=>console.log(err));
        shareNewAutumn();
    },
    methods:{
        //获取优惠券
        getCoupus(){
            if(this.isRegPhone && this.isSubscribe){
                this.getCoupsState = false;
                //活动的优惠券名称和获取途径都是固定的
                getCoupon({couponNo: this.codeInfo.quanCN ,couponWay:"4"}).then(res=>{
                    if(res.rspCode == '0000' && res.data.rspCode == '0000'){
                        this.$Toast('领取成功',2000);
                    }else{
                        this.$Toast(res.data.rspMsg);
                    }
                }).catch(err=>this.$Toast("领取失败",2000))
            }else if(!this.isRegPhone && this.isSubscribe){
                this.showPopup = true;
                this.popupNo = '';
                this.getCoupsState = true;
            }else if(!this.isSubscribe){
                this.$router.push({ path:'/follow' });
            }
        },
        //点击购买
        getAutumn(cateNo){
            if(this.isRegPhone && this.isSubscribe){
                this.toNext('categoryDetail',{ cateNo:cateNo })
            }else if(!this.isRegPhone && this.isSubscribe){
                this.showPopup = true;
                this.getCoupsState = false;
                this.popupNo = cateNo;
            }else if(!this.isSubscribe){
                this.$router.push({ path:'/follow' });
            }
        },
        //手机号绑定成功回调
        confirmCB(){
            this.showPopup = false;
            this.isRegPhone = true;
            this.popupNo && this.getAutumn(this.popupNo);
            this.getCoupsState && this.getCoupus();
        },
        //验证是否关注方法
        async getScanQRcode(){
            //设置全局变量保存图片地址
            // this.$store.commit('setFollowImg','https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1238306461,4175201788&fm=27&gp=0.jpg')
            // this.$router.push({ path:'/follow' });
            await isUserSubscribe({}).then(res=>{
                if(res.rspCode == '0000' && res.data.rspCode == "0000"){
                    this.isSubscribe = true;
                }else{
                    this.isSubscribe = false;
                    res.data && this.$store.commit('setFollowImg',res.data.wechatMpUrl);
                }
            })
        }
    },
    beforeRouteLeave(to,from,next){
        shareIndex();
        next();
    }
}
</script>
<style lang="less" scoped>
.page{
    background:#f6f6f6;
    min-height:100%;
    .price{
        color:#ff3932;
    }
    .details{
        width:46%;
        margin-left:2%;
        margin-right:2%;
        margin-top:1rem;
        float:left;
    }
    .shopGo{
        background:#f0eff5;
    }
    .clickTop{
        bottom:28%;
        left:45%;
        width:25%;
    }
    .clickMiddle{
        top:50%;
        right:25%;
        width:20%;
    }
    .clickBottom{
        bottom:12%;
        left:10%;
        width:20%;
    }
    .relative{
        margin-top:-1px;
    }
}
</style>
